import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input,  Select, Button, Icon, Row, Col } from 'antd'
import { connect } from 'dva'
import styles  from '../../themes/detail.less'

const FormItem = Form.Item
const Option = Select.Option
const { TextArea } = Input
const ButtonGroup = Button.Group

const formItemLayout = {
  labelCol: {
    span: 9,
  },
  wrapperCol: {
    span: 15,
  },
}

const EmployerPhoneData = ({
  employerPhoneData,
  dispatch,
  loading,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
}) => {
  const item = employerPhoneData.data || {}
  const { contractTypeData, communicationTypeData, parentId, phoneType } = employerPhoneData
  const ButtonProps = {
    size: 'large',
    style: {
      marginBottom: 0,
    },
  }
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        id: item.id || 1,
      }
      dispatch({
        type: 'employerPhoneData/update',
        payload: data,
      })
    })
  }
  const handleDelete = () => {
    dispatch({
      type: 'employerPhoneData/delete',
      payload: {
        personId: parentId,
        type: phoneType,
        id: item.id,
      }
    })
  }
  const contractTypeOption = contractTypeData.map(d => <Option key={d.code}>{d.name}</Option>)
  const communicationTypeOption = communicationTypeData.map(d => <Option key={d.code}>{d.name}</Option>)
  return (
    <Form layout="horizontal">
      <div className={styles.div_buttonGroup}>
        <ButtonGroup {...ButtonProps}>
          <Button onClick={handleOk} loading={loading.effects['employerPhoneData/update']}>
            Save<Icon type="save" />
          </Button>
          <Button onClick={handleDelete}>
            Delete<Icon type="delete" loading={loading.effects['employerPhoneData/delete']} />
          </Button>
        </ButtonGroup>
      </div>
      <div className={styles.div_form}>
        <Row>
          <Col span={12}>
            <FormItem label="ContactType" hasFeedback {...formItemLayout}>
              {getFieldDecorator('contactType', {
                initialValue: item.contactType||'I',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }}>{contractTypeOption}</Select>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Comm.Type" hasFeedback {...formItemLayout}>
              {getFieldDecorator('communicationType', {
                initialValue: item.communicationType||'C',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }}>{communicationTypeOption}</Select>)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="CountryPrefix" hasFeedback {...formItemLayout}>
              {getFieldDecorator('countryPrefix', {
                initialValue: item.countryPrefix,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Area Code + Number" hasFeedback {...formItemLayout}>
              {getFieldDecorator('number', {
                initialValue: item.number,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="Extension" hasFeedback {...formItemLayout}>
              {getFieldDecorator('extension', {
                initialValue: item.extension,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Comments" hasFeedback {...formItemLayout}>
              {getFieldDecorator('comments', {
                initialValue: item.comments,
              })(<TextArea rows={4} />)}
            </FormItem>
          </Col>
        </Row>
      </div>
    </Form>
  )
}

EmployerPhoneData.propTypes = {
  form: PropTypes.object.isRequired,
  employerPhoneData: PropTypes.object,
  loading: PropTypes.object,
  dispatch: PropTypes.func,
}

export default connect(({ employerPhoneData, loading }) => ({ employerPhoneData, loading }))(Form.create()(EmployerPhoneData))
